<template>
	<zkView ref="zkView" v-slot:uContainer>
		<view class="container">
			<view class="address" @click="chooseAddress">
				<view class="info" v-if="`${name}${phone}${regionStr}${address}`">
					<view class="top">
						<text>{{name}}</text>
						<text>{{formatPhone(phone)}}</text>
					</view>
					<view class="bottom">
						<text>{{`${regionStr} ${address}`}}</text>
					</view>
				</view>
				<view class="info" v-else>
					<view class="top">
						<text>请选择收货地址</text>
					</view>
				</view>
				<view class="arrow">
					<image mode="aspectFit" src="/static/mine/arrow_right.png"></image>
				</view>
			</view>
			<view class="products">
				<view class="title">商品信息</view>
				<block v-if="proList&&proList.length>0">
					<block v-for="(pro, index) in proList" :key="index">
						<view class="productItem" v-if="pro.productInfo&&pro.spuInfo">
							<view class="itemLeft">
								<image mode="aspectFit" :src="pro.productInfo.thumbs[0] || '/static/placeholder.png'"></image>
							</view>
							<view class="itemRight">
								<view class="name">{{pro.productInfo.name}}</view>
								<view class="spu">{{pro.productInfo.name}}</view>
								<view class="priceNum">
									<view class="price">
										<text>￥</text>
										<text>{{formatPrice(pro.spuInfo.price_sale)}}</text>
										<text>￥</text>
										<text>{{formatPrice(pro.spuInfo.price_original)}}</text>
									</view>
									<view class="num">
										<text :style="{color:pro.count<= 1?'#858a98':'#333333'}" @click="countMinus(index)">-</text>
										<text>{{pro.count}}</text>
										<text :style="{color:pro.count<= 10?'#858a98':'#333333'}" @click="countPlus(index)">+</text>
									</view>
								</view>
							</view>
						</view>
					</block>
				</block>
			</view>

			<view class="money">
				<view class="moneyItem">
					<view class="itemLeft">商品总数</view>
					<view class="itemRight">{{priceDetail.totalCount}}件</view>
				</view>
				<view class="moneyItem">
					<view class="itemLeft">商品总价</view>
					<view class="itemRight">￥{{formatPrice(priceDetail.totalMoney)}}</view>
				</view>
				<view class="moneyItem">
					<view class="itemLeft">邮费</view>
					<view class="itemRight txtGold" v-if="priceDetail.needMoney>=99">满99包邮</view>
					<view class="itemRight">￥8.0 </view>
				</view>
				<view class="moneyItem">
					<view class="itemLeft">商品优惠</view>
					<view class="itemRight txtGold">
						减￥{{formatPrice(priceDetail.saleDiscount)}}</view>
				</view>
				<view class="moneyItem" @click="selectTicket">
					<view class="itemLeft">优惠券</view>
					<view class="itemRight txtGold">
						减￥{{formatPrice(priceDetail.ticketDiscount)}}
						<text v-if="couponList&&couponList.length">有优惠</text>
					</view>
					<uni-icons type="right" size="36rpx" color="#f3a73f"></uni-icons>
				</view>
				<view class="totalItem">
					<view class="itemLeft">共减:</view>
					<view class="itemRight txtGold">
						￥{{formatPrice(priceDetail.totalDiscount)}}
					</view>
					<view class="itemLeft">，需支付:</view>
					<view class="itemRight txtRed">
						￥{{formatPrice(priceDetail.needMoney)}}
					</view>
				</view>
			</view>
			<!-- todo: 后期改为云端控制 -->
			<view class="hint">
				<uni-icons type="info" size="20" color="#eeb14e"></uni-icons>
				<text>由于商品是农家自制，为了保证新鲜，未大批储备，如果遇到缺库存需要现制作时，包裹将在48小时内发出。</text>
				<uni-icons type="info" size="20" color="#eeb14e"></uni-icons>
				<text>首重1kg，每增加0.5kg加收2元，不足0.5kg按0.5kg计算</text>
			</view>

			<view class="bottomBox">
				<view class="left">
					<view class="line1">
						<text>￥</text>
						<text>{{formatPrice(priceDetail.needMoney).split('.')[0]}}</text>
						<text>.{{formatPrice(priceDetail.needMoney).split('.')[1]}}</text>
					</view>
					<!-- 
					<view class="line2">
						<text>包邮</text>
					</view> 
					-->
				</view>
				<view class="right">
					<button size="default" type="default" class="btnDefault scaleAni" hover-class="btnHover"
						@click="toBooking">立即支付</button>
				</view>
			</view>
		</view>
	</zkView>
	<ticketPopup ref="ticketRef" @popupChange="popupChange" @noSelect="noSelect" @confirmSelect="confirmSelect" />
</template>

<script>
	import indexJs from './index.js';
	import mixins from '@/common/mixins.js';
	import ticketPopup from '@/components/ticketPopup/ticketPopup.vue';

	export default {
		components: {
			ticketPopup
		},
		mixins: [mixins],
		...indexJs
	};
</script>

<style lang="scss" scoped>
	@import './index.scss';
</style>